<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/assets/vendor/bootstrap/css/bootstrap.min.css">
	<script src="/assets/vendor/jquery/jquery-1.11.3.min.js"></script>
	<script src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="/assets/vendor/other/holder.js"></script>
	<script src="/assets/vendor/other/application.js"></script>  
</head>
<body>
	<div class="container">
		<h3 class="page-header">Modals</h3>
		<h4>default modal</h4>
		<div>
			<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal">查看内容</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">中国人民解放军</h4>
						</div>
						<div class="modal-body">
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
						</div>
						<div class="modal-footer">
							<buttton class="btn btn-default" type="button" data-dismiss="modal">Close</buttton>
							<buttton class="btn btn-primary" type="button">Save changes</buttton>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h4>small modal</h4>
		<div>
			<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal2">查看内容</button>
			<div class="modal fade" id="myModal2">
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">中国人民解放军</h4>
						</div>
						<div class="modal-body">
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
						</div>
						<div class="modal-footer">
							<buttton class="btn btn-default" type="button" data-dismiss="modal">Close</buttton>
							<buttton class="btn btn-primary" type="button">Save changes</buttton>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h4>big modal</h4>
		<div>
			<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal3">查看内容</button>
			<div class="modal fade" id="myModal3">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">中国人民解放军</h4>
						</div>
						<div class="modal-body">
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
						</div>
						<div class="modal-footer">
							<buttton class="btn btn-default" type="button" data-dismiss="modal">Close</buttton>
							<buttton class="btn btn-primary" type="button">Save changes</buttton>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h4>无动画 modal</h4>
		<div>
			<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal4">查看内容</button>
			<div class="modal" id="myModal4">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">中国人民解放军</h4>
						</div>
						<div class="modal-body">
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
						</div>
						<div class="modal-footer">
							<buttton class="btn btn-default" type="button" data-dismiss="modal">Close</buttton>
							<buttton class="btn btn-primary" type="button">Save changes</buttton>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h4>js实现modal</h4>
		<div>
			<button class="btn btn-primary" id="mybtn" type="button">查看内容</button>
			<div class="modal fade" id="myModal5">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">中国人民解放军</h4>
						</div>
						<div class="modal-body">
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
							<p>世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了，世界人民从此站起来了。</p>
						</div>
						<div class="modal-footer">
							<buttton class="btn btn-default" type="button" data-dismiss="modal">Close</buttton>
							<buttton class="btn btn-primary" type="button">Save changes</buttton>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h3 class="page-header">Dropdown</h3>
		<div>
			<div class="dropdown">
				<button class="btn btn-primary" data-toggle="dropdown">
					请选择
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>
				</ul>
			</div>
		</div>
		<h3 class="page-header">ScrollSpy</h3>
		<div>
			<nav id="navbar_example">
				<div class="navbar navbar-default">
					<div class="navbar-header">
						<a href="" class="navbar-brand">Project Name</a>
					</div>
					<div>
						<ul class="nav navbar-nav">
							<li><a href="#fmz">@fmz</a></li>
							<li><a href="#cll">@cll</a></li>
							<li class="dropdown">
								<a href="" data-toggle="dropdown">
									请选择
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#one">one</a></li>
									<li><a href="#two">two</a></li>
									<li class="divider"></li>
									<li><a href="#three">three</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
			<div data-spy="scroll" data-target="#navbar_example" style="position:relative ;">
				<h4 id="fmz">@fmz</h4>
				<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
				<h4 id="cll">@cll</h4>
				<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
				<h4 id="one">@one</h4>
				<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
				<h4 id="two">@two</h4>
				<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
				<h4 id="three">@three</h4>
				<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
			</div>
		</div>
		<p class="bg-danger">注：上面模仿未成功</p>
		<h3 class="page-header">Tag</h3>
		<div>
			<ul class="nav nav-tabs">
				<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
				<li><a data-toggle="tab" href="#profile">Profile</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active fade in" id="home">
					<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
				</div>
				<div class="tab-pane fade in" id="profile">
					<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
				</div>
			</div>
		</div>
		<h3 class="page-header">幻灯片播放图片</h3>
		<div>
			<div id="mycarousel" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					 <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
					 <li data-target="#mycarousel" data-slide-to="1"></li>
					 <li data-target="#mycarousel" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<img src="images/cll_life_hair.jpg" alt="">
						<div class="carousel-caption">first beautiful girl</div>
					</div>
					<div class="item">
						<img src="images/cll_life_hair2.jpg" alt="">
						<div class="carousel-caption">
							<h3>这是一个大美女</h3>
							<p>美女就会有美女的气质，当她站在人群当中的时候就会脱颖而出！</p>
						</div>
					</div>
					<div class="item">
						<img src="images/cll_life_station.jpg" alt="">
						<div class="carousel-caption">third beautiful girl</div>
					</div>
				</div>
				<a href="#mycarousel" data-slide="prev" class="left carousel-control">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				<a href="#mycarousel" data-slide="next" class="right carousel-control">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>
		</div>
	</div>
</body>
<script>
	$('#mybtn').click(function(){
		$('#myModal5').modal() ;
	}) ;
</script>
</html>
